<template>
  <div class="editbox">
    <h1>修改管理员信息</h1>
    <el-form
      :model="adminList"
      label-width="120px"
      class="adminList"
      status-icon
    >
      <el-form-item label="编号">
        <el-input v-model="adminList.adminid" disabled />
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="adminList.adminname" disabled />
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="adminList.password" :show-password="true" />
      </el-form-item>

      <el-form-item label="角色">
        <el-radio-group v-model="adminList.role">
          <el-radio :label="1">超级管理员</el-radio>
          <el-radio :label="2">普通管理员</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 权限选择 -->
      <el-form-item label="权限">
        <el-tree
          ref="treeRef"
          :data="data"
          show-checkbox
          node-key="id"
          highlight-current
          :default-checked-keys="adminList.checkedKeys"
          check-strictly
          accordion
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="editForm()"> Edit </el-button>
        <el-button @click="resetForm()">Reset</el-button>
        <el-button type="danger" @click="cancelForm()"> Cancel </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ElMessage,ElTree } from "element-plus";
import "element-plus/dist/index.css";

import { reactive, ref, watch } from "vue";

import service from "../../../utils/service";
import { menudata as data } from "../../../grants/menudata";
import { TreeKey } from "element-plus/es/components/tree/src/tree.type";

interface IAdmin {
  adminid: string;
  adminname: string;
  password: string;
  role: number;
  checkedKeys: TreeKey[];
}

const adminList = reactive<IAdmin>({
  adminid: "",
  adminname: "",
  password: "",
  role: 1,
  checkedKeys: [],
});

// 声明属性
const props = defineProps<{
  adminname: string;
}>();

// 声明事件
const emit = defineEmits<{
  (e: "hide"): void;
  (e: "updatesuccess"): void;
}>();
// 获取修改管理员信息
const getAdminDetail = () => {
  service({
    url: "/admin/admin/detail",
    params: {
      adminname: props.adminname,
    },
  }).then((res) => {
    if (res.data.code === "200") {
      adminList.adminid = res.data.data[0].adminid;
      adminList.adminname = res.data.data[0].adminname;
      adminList.role = res.data.data[0].role;
      adminList.checkedKeys = res.data.data[0].checkedKeys;
    }
  });
};
// 监听所传的值
watch(
  props,
  () => {
    getAdminDetail();
    adminList.password = ""; //密码不显示
  },
  {
    deep: true,
  }
);

let  treeRef = ref<InstanceType<typeof ElTree>>();
// Edit-修改
const editForm = () => {
  let arr:TreeKey[] = treeRef.value!.getCheckedKeys(false);

  let halfArr:TreeKey[] = treeRef.value!.getHalfCheckedKeys();

  arr = arr.concat(halfArr);
  // // 打印查看下获得的数组
  console.log("arr", arr);
  adminList.checkedKeys = arr;

  service({
    url: "/admin/admin/update",
    method: "post",
    data: {
      adminname: adminList.adminname,
      password: adminList.password,
      role: adminList.role,
      checkedKeys: adminList.checkedKeys,
    },
  }).then((res) => {
    if (res.data.code === "200") {
      ElMessage({
        message: "管理员信息修改成功！",
        type: "success",
      });
      emit("hide"); //关闭弹框
      emit("updatesuccess"); // 修改成功，在父组件渲染
      getAdminDetail();
    }
  });
};

// Reset-清空重置
const resetForm = () => {
  // adminList.adminid = "";
  // adminList.adminname = "";
  adminList.password = "";
  adminList.role = 0;
};

// Cancel-关闭弹框
const cancelForm = () => {
  emit("hide");
  emit("updatesuccess"); // 修改成功
};
</script>

<style scoped>
.editbox {
  width: 500px;
  height: 660px;
  border: 1px solid #bbc4e4;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #eef0f1;
  z-index: 666;
}
.editbox h1 {
  line-height: 50px;
  text-align: center;
}
.adminList {
  padding-right: 80px;
}
.el-tree {
  background: transparent;
}
</style>